function getsplitMistake(subSet1,subSet2)
{
       for (let i =0;i<splitData.length;i++)
        {
            let sub1Max=d3.max(subSet1,(d)=>d[splitData[i].index]);
            let sub1Min=d3.min(subSet1,(d)=>d[splitData[i].index]);
            let sub2Max=d3.max(subSet2,(d)=>d[splitData[i].index]);
            let sub2Min=d3.min(subSet2,(d)=>d[splitData[i].index]);
            if(sub1Max<=sub2Min){
                splitData[i].flag = true;
                splitData[i].minValue = sub1Max;
                splitData[i].maxValue = sub2Min;
                 splitData[i].mistake = d3.min(splitData[i].mistakelist,function(d,i)
                 {
                     if(d[0]<=sub1Max || d[0]>sub2Min)
                         return null;
                     else
                         return d[1]
                 });
                 for(let j =0 ;j<splitData[i].mistakelist.length;j++)
                {
                    if(splitData[i].mistakelist[j][1]==splitData[i].mistake
                        && splitData[i].mistakelist[j][0]>=sub1Max
                        && splitData[i].mistakelist[j][0]<sub2Min){
                        splitData[i].bestValue = splitData[i].mistakelist[j][0];
                    }
                }
            }
            else if(sub2Max<=sub1Min){
                splitData[i].flag = true;
                splitData[i].minValue = sub2Max;
                splitData[i].maxValue = sub1Min;
                splitData[i].mistake = d3.min(splitData[i].mistakelist,function(d,i)
                 {
                     if(d[0]<=sub2Max || d[0]>sub1Min)
                         return null;
                     else
                         return d[1]
                 });
                for(let j =0 ;j<splitData[i].mistakelist.length;j++)
                {
                    if(splitData[i].mistakelist[j][1]==splitData[i].mistake
                        && splitData[i].mistakelist[j][0]>=sub2Max
                        && splitData[i].mistakelist[j][0]<sub1Min){
                        splitData[i].bestValue = splitData[i].mistakelist[j][0];
                    }
                }
            }
            else{
                splitData[i].flag = false;
                splitData[i].mistake= Infinity ;
            }
        }
       splitData.sort(function (a,b){
           return  d3.ascending(a.mistake,b.mistake);
        });

}
function makeClusterSplitData(centers){
    let keys = Object.keys(centers);
    let a = keys.length;
    let k = 2**(a-1)-1;
    splitSet = [];
    for (let i = 1;i<=k;i++)
    {
       let  string = i.toString(2).padStart(a,"0");
       let splitInfo = {
           leftSet :[],
           rightSet:[],
           leftkeys:[],
           rightkeys:[],
           mistake:0,
           splitFeature:0,
           splitValue:0
       }
       for (let j = 0;j<a;j++)
       {
            if (string[j]=='0')
            {
                splitInfo.leftSet.push(centers[keys[j]]);
                splitInfo.leftkeys.push(keys[j]);
            }
            else
            {
                splitInfo.rightSet.push(centers[keys[j]]);
                splitInfo.rightkeys.push(keys[j]);
            }

       }
       getsplitMistake(splitInfo.leftSet,splitInfo.rightSet);
       splitInfo.mistake = splitData[0].mistake;
       splitInfo.splitFeature= splitData[0].index;
       splitInfo.splitValue = splitData[0].bestValue;
       splitInfo.flag = splitData[0].flag;
       splitSet.push(splitInfo);
    }
    splitSet.sort(function (a,b){
           return  d3.ascending(a.mistake,b.mistake);
        });

    drawClusterSplitView();
}
function drawClusterSplitView(){
    d3.select("#ClusterSplitView").selectAll("div").remove();
    const chart = new Chart();
    const config = {
        margins: {top: 30, left: 0, bottom: 0, right: 0},
        textColor: 'black',
        gridColor: 'gray',
        title: '基础河流图',
        animateDuration: 1000
    }

    chart.margins(config.margins);
    chart.width(300);
    chart.height(230);
    chart.renderTitle = function (){
        chart.svg().append("text").attr('x',0).attr("y",10).text("Order");
        chart.svg().append("text").attr('x',60).attr("y",10).text("Cluster\n Split");
        chart.svg().append("text").attr('x',150).attr("y",10).text("Mis");
        chart.svg().append("text").attr('x',190).attr("y",10).text("Fea");
        chart.svg().append("text").attr('x',270).attr("y",10).text("Val");
        chart.body().append("line").attr('x1',0).attr("y1",-10).attr('x2',300).attr("y2",-10).attr("stroke","green");
    }
    chart.renderBack = function (){
        chart.body().selectAll(".backRect").remove();
        chart.body().selectAll(".backRect").data(splitSet).enter().append("rect").attr("x",0).attr("y",(d,i)=>(i)*30-10).attr("width",300).attr("height",30).attr("fill","white").attr("class","backRect");
        chart.body().selectAll(".backRect").on("click",function (d,i){
            chart.body().selectAll(".backRect").attr("fill","white")
            d3.select(this).attr("fill","#7ba285");
           getsplitMistake(splitSet[i].leftSet,splitSet[i].rightSet);
           let maxmistake=0;
                for (let i = 0;i<splitData.length;i++)
                {
                    let tempmistake = d3.max(splitData,function (d,i){
                        return d3.max(d.mistakelist,function (d) {return d[1];});
                    });
                    if(tempmistake>maxmistake)
                        maxmistake=tempmistake;
                }
                d3.select("#streamView").selectAll("div").remove();
                let con1 = d3.select("#divisionView");
                let j =0;
                for (let i = 0; i < splitData.length; i++) {
                    if(featureNameImportance[splitData[i].index]) {
                        bestsplitValue[splitData[i].index] = splitData[i].bestValue;

                        let con = d3.select("#streamView").append("div").attr("id", "streamView" + splitData[i].index)
                         .style("border-bottom","2px solid #2b8f2b");

                        drawStreamChart(con, splitNode, splitData[i], maxmistake, j);
                        if (j==0)
                        {

                            drawAttributeDivisionChart(splitData[i].index,splitData[i].bestValue,con1);
                            splitTheNode();
                        }
                        j++;
                    }

                }
        });

    }
    chart.renderContext = function (){
        for (let i = 0; i < splitSet.length; i++) {
            chart.body().append("line").attr('x1',0).attr("y1",(i+1)*30-10).attr('x2',300).attr("y2",(i+1)*30-10).attr("stroke","green");
            chart.body().append("text").attr('x',5).attr("y",10+i*30).text(i+1);
            let j = 0;
            for (j = 0;j <splitSet[i].leftkeys.length;j++)
            {
                chart.body().append("circle").attr("cx",70+j*12).attr("cy",5+i*30).attr("r",5).attr("fill",chart._colors[parseInt(splitSet[i].leftkeys[j])+1]).attr("stroke","black");
            }
             chart.body().append("line").attr("x1",75+j*12).attr("x2",75+j*12).attr("y1",-5+i*30).attr("y2",15+i*30).attr("stroke","black");
             for (;j <splitSet[i].leftkeys.length+splitSet[i].rightkeys.length;j++)
            {
                chart.body().append("circle").attr("cx",90+j*12).attr("cy",5+i*30).attr("r",5).attr("fill",chart._colors[parseInt(splitSet[i].rightkeys[j-splitSet[i].leftkeys.length])+1]).attr("stroke","black");
            }
            if ( splitSet[i].flag)
            {
                chart.body().append("text").attr('x',150).attr("y",10+i*30).text(splitSet[i].mistake);
                chart.body().append("text").attr('x',190).attr("y",10+i*30).text(featureNames[splitSet[i].splitFeature]);
                chart.body().append("text").attr('x',270).attr("y",10+i*30).text(splitSet[i].splitValue);
            }
            else {
                 chart.svg().append("circle").attr("cx",200).attr("cy",35 + i * 30).attr("r",10).attr('fill', "red").attr("class","order")
                    .attr('fill-opacity', 0.8)
                    .attr("stroke","yellow");
                chart.svg().append("text").attr('x', 195).attr("y", 40 + i * 30).text("X").attr("fill","yellow");
            }
        }

    }
    chart.render = function(){
        chart.renderBack();
        chart.renderTitle();
        chart.renderContext();

    }
    chart.box(d3.select("#ClusterSplitView"));
    chart.renderChart();
}